<template>
  <div class="app-container">
    <el-row id="title">
      <div class="title-legend">
        <div class="legend-icon" style="background: green"></div>
        <div class="legend-text">线体运行（AUTO）</div>
      </div>
      <div class="title-legend">
        <div class="legend-icon" style="background: red"></div>
        <div class="legend-text">线体停止（DOWN）</div>
      </div>
      <div class="title-legend">
        <div class="legend-icon" style="background: gray"></div>
        <div class="legend-text">线体作息休息（StandBy）</div>
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="workshop" v-for="item in factoryData" :key="item.workshopId">
        <el-row class="workshop-title">{{item.workshopName}}</el-row>
        <el-row>
          <el-col :span="12" class="line-outter" v-for="ele in item.lines" :key="ele.lineId">
            <el-row :gutter="10" class="line-content" :style="{backgroundColor: randomColor()}">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="ele.startupRate"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">{{ele.lineName}}</el-col>
            </el-row>
          </el-col>
          <!-- <el-col :span="12" class="line-outter">
            <el-row :gutter="10" class="line-content">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="testOptions"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">Pack车间</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="line-outter">
            <el-row :gutter="10" class="line-content" style="background-color: red">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="testOptions"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">冲压PL2</el-col>
            </el-row>
          </el-col> -->
          <!-- <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col> -->
        </el-row>
      </el-col>
      <!-- <el-col :span="12" class="workshop">
        <el-row class="workshop-title">焊装</el-row>
        <el-row>
          <el-col :span="12" class="line-outter">
            <el-row :gutter="10" class="line-content">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="testOptions"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="line-outter">
            <el-row :gutter="10" class="line-content" style="background-color: gray">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="testOptions"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">Pack车间</el-col>
            </el-row>
          </el-col>
          <el-col :span="12" class="line-outter">
            <el-row :gutter="10" class="line-content" style="background-color: red">
              <el-col :span="16">
                <el-row>
                  <chart
                    class="gauge-echarts"
                    :options="testOptions"
                    :auto-resize="true"
                  ></chart>
                </el-row>
                <el-row class="gauge-remark">当前开动率</el-row>
              </el-col>
              <el-col :span="8" class="line-title">冲压PL2</el-col>
            </el-row>
          </el-col>
          <!-- <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col> -->
        </el-row>
      </el-col> -->
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="12">
        <el-row>涂装</el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">PACK车间</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>总装</el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">PACK车间</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-row></el-row>
                <el-row>当前开动率</el-row>
              </el-col>
              <el-col :span="8">冲压PL1</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
  </div>
</template>
<style scoped>
/* 首行legend的样式 */
#title {
  background: #fff;
  padding-top : 10px;
  /* margin-bottom: 32px; */
  overflow: hidden;
}
#title > .title-legend {
  float: left;
  width: 251px;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
}
#title > .title-legend > .legend-icon {
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
#title > .title-legend > .legend-text {
  float: left;
  height: 20px;
  line-height: 20px;
}
/* 车间开动率主体样式 */
.workshop > .workshop-title {
  font-size: 40px;
  font-weight: 800;
}
.workshop .line-title {
  height: 180px; 
  line-height: 180px;
  font-size: 25px;
  font-weight: 800;
}
.workshop .line-outter {
  padding: 10px;
  box-sizing: border-box;
}
.workshop .line-outter > .line-content {
  background-color: green;
}
.line-content .gauge-echarts {
  width: 100%;
  height: 150px;
  padding: 10px 0;
  box-sizing: border-box;
}
.line-content .gauge-remark {
  height: 20px; 
  line-height: 20px; 
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
</style>
<script>
export default {
  name: "LineMonitor",
  data() {
    return {
      factoryData: [],
      // test
      testOptions: {}
    };
  },
  created() {
    // test 
    this.factoryData = [
      {
        workshopId: 1,
        workshopName: '焊装',
        lines: [
          {
            lineId: 1,
            lineName: '产线一',
            startupRate: this.formatOptionData(0.5)
          },
          {
            lineId: 2,
            lineName: '产线二',
            startupRate: this.formatOptionData(0.6)
          },
          {
            lineId: 3,
            lineName: '产线三',
            startupRate: this.formatOptionData(0.8)
          }
        ]
      },
      {
        workshopId: 1,
        workshopName: '涂装',
        lines: [
          {
            lineId: 1,
            lineName: '产线一',
            startupRate: this.formatOptionData(0.5)
          },
          {
            lineId: 2,
            lineName: '产线二',
            startupRate: this.formatOptionData(0.6)
          },
          {
            lineId: 3,
            lineName: '产线三',
            startupRate: this.formatOptionData(0.8)
          }
        ]
      },
      {
        workshopId: 1,
        workshopName: '总装',
        lines: [
          {
            lineId: 1,
            lineName: '产线一',
            startupRate: this.formatOptionData(0.5)
          },
          {
            lineId: 2,
            lineName: '产线二',
            startupRate: this.formatOptionData(0.6)
          },
          {
            lineId: 3,
            lineName: '产线三',
            startupRate: this.formatOptionData(0.8)
          }
        ]
      },
      {
        workshopId: 1,
        workshopName: 'PACK',
        lines: [
          {
            lineId: 1,
            lineName: '产线一',
            startupRate: this.formatOptionData(0.5)
          },
          {
            lineId: 2,
            lineName: '产线二',
            startupRate: this.formatOptionData(0.6)
          },
          {
            lineId: 3,
            lineName: '产线三',
            startupRate: this.formatOptionData(0.8)
          }
        ]
      }
    ]
  },
  mounted() {
    // test
    this.testOptions = {
      // tooltip : {
      //     formatter: "{a} <br/>{b} : {c}%"
      // },
      // toolbox: {
      //     show : true,
      //     feature : {
      //         mark : {show: true},
      //         restore : {show: true},
      //         saveAsImage : {show: true}
      //     }
      // },
      grid: {
        show: false,
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      },
      series: [
        {
          name: "开动率",
          type: "gauge",
          radius: "100%",
          startAngle: 180,
          endAngle: 0,
          detail: {  },
          data: [{ value: 50 }],
          axisLine: {
              show:true,
              // 属性lineStyle控制线条样式
              lineStyle: {
                  width: 15,
                  color:[[0.3,'#ff797a'],[0.5,'#999'],[1, '#a3db41']]
              }
          },
          axisLabel:{
              show:false,
          },
          detail: {
            show: true,
            offsetCenter: ['0', '85%'],
            formatter: "{value}%",
            color: '#000'
          },
          itemStyle: {
            color: '#000'
          },
          markPoint: {
            label: {
              show: false
            }
          }
        }
      ]
    };
  },
  methods: {
    // test
    randomColor() {
      const colorArr = ['green', 'red', 'gray']
      return colorArr[Math.floor(Math.random() * 3)]
    },
    setOptions(listData) {
      for (let i = 0; i < listData.length; i++) {
        const element = listData[i];
        
      }
    },
    formatOptionData(value) {
      return {
        grid: {
          show: false,
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        series: [
          {
            name: "开动率",
            type: "gauge",
            radius: "100%",
            startAngle: 180,
            endAngle: 0,
            detail: {  },
            data: [{ value: value * 100 }],
            axisLine: {
                show:true,
                // 属性lineStyle控制线条样式
                lineStyle: {
                    width: 15,
                    color:[[0.3,'#ff797a'],[0.5,'#999'],[1, '#a3db41']]
                }
            },
            axisLabel:{
                show:false,
            },
            detail: {
              show: true,
              offsetCenter: ['0', '85%'],
              formatter: "{value}%",
              color: '#000'
            },
            itemStyle: {
              color: '#000'
            },
            markPoint: {
              label: {
                show: false
              }
            }
          }
        ]
      }
    }
  }
};
</script>